<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>

    <!-- 第2种写法位置：统一调整样式；当前页面的其他元素都能用到 -->
    <style>
        div {
            color: red;
            /* rgb：红绿蓝； (0-255)之间 255 */
            /* background-color: rgb(128, 129, 222); */
            background-color: #ffaaee ;
            border: 1px solid black;
        }

        /* 元素选择器： 选中所有h1标签设置样式 */
        h1 {
            color: blue;
        }

                /* id选择器： #id值 */
        #haha01 {
            color: green;
        }


        /* 类选择器： .类名 */
        .group1 {
            color: black;
        }

        .group2 {
            color: blue;
        }


        /* *: 代表所有标签'； [属性名]：属性选择器 */
        a[href] {
            color: red;
        }


        /* 标签:伪类名 */
        div:hover {
            background-color: green;
        }


        /* 第一个div元素，设置背景 ； 层叠样式表优先级*/
        div:first {
            background-color: aquamarine;
        }

        * {
            background-color: aquamarine;
        }

        /* 优先级： 内联样式 > ID选择器 > 类/属性/伪类选择器 > 元素/伪元素选择器 > 通配选择器 */

    </style>
</head>

<body>

    <!--第一种位置：写到标签属性里面 style属性：指定标签样式 
     每个样式语法： 样式名: 样式值; 多个用;分割

     样式优先级：精确设置优先； 层叠（优先级）
     标签style设置的样式拥有最高优先级
     选择器优先级： id > 标签 > xxx
     CSS：是所有程序员最难的（样式+布局+动画）； ai写样式； 后端顶多写个布局
    -->
    <h1 id="haha01" style="color: aqua;">你好</h1>
    <h1>呵呵</h1>
    <p>我是一个段落</p>
    <div class="group1">a</div>
    <div class="group1">b</div>
    <div class="group1">c</div>
    <span class="group2">呵呵</span>
    <span class="group2">哈哈</span>
    <span class="group2">嘿嘿</span>
    <div>d</div>
    <p>我是一个段落</p>
    <a href="https://www.baidu.com">去百度</a>
    <a>去吃饭</a>
    <button>幽灵按钮</button>

    
</body>

</html>